<template>
  <a-modal
    :width="1000"
    :bodyStyle="bodystyle"
    :visible="open"
    :title="formTitle"
    @cancel="cancel"
  >
    <a-card style="width: 100%">
      <a-spin :spinning="spinning" :delay="delayTime" tip="Loading...">
        <pre>{{ this.content }}</pre>
      </a-spin>
    </a-card>
    <template slot="footer">
      <a-button @click="cancel">
        取消
      </a-button>
    </template>
  </a-modal>
</template>
<script>
import { viewFile } from '@/api/dockerinsight/fileSystem'
export default {
  name: 'ContentForm',
  components: {
  },
  props: {
    currentPath: {
      type: String,
      required: true
    },
    ip: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      spinning: false,
      delayTime: 100,
      open: false,
      formTitle: undefined,
      viewFileParam: {},
      content: undefined,
      bodystyle: {
        height: '600px',
        overflow: 'hidden',
        overflowY: 'scroll'
      }
    }
  },
  created () {
  },
  methods: {
    // 查看内容
    getContent (fileName) {
      this.spinning = !this.spinning
      this.reset()
      this.open = true
      this.formTitle = '文件内容'
      this.viewFileParam.ip = this.ip
      this.viewFileParam.currentPath = this.currentPath
      this.viewFileParam.fileName = fileName
      viewFile(this.viewFileParam).then(response => {
        this.content = response.data
        this.spinning = !this.spinning
      }).catch(error => {
        console.log(error)
        this.spinning = !this.spinning
      })
    },
    // 重置表单
    reset() {
      this.content = ''
    },
    // 取消按钮
    cancel () {
      this.open = false
      this.reset()
      this.$emit('colse')
    }
  }
}
</script>
